<script setup>
import MwTableAlarm from "./component/MwTableAlarm";
import MwTableCamera from "./component/MwTableCamera";
import MwTableDriver from "./component/MwTableDriver";
import MwTableVehicle from "./component/MwTableVehicle";
import moment from 'moment';

import { ref, reactive, getCurrentInstance, onMounted, markRaw, watch, nextTick } from "vue"
import { Search } from '@element-plus/icons-vue'

const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties; //vue3获取当前this

import { globalStore } from "@/store/global";
const globalVue = globalStore();

// 医院ID
const disabledBack = ref(false)
const detailId = ref(0); 
const hospitalDetail = reactive({}); 
let imageList = [
  {
    type: 1,
    organIcon: require(`@/assets/image/alarm_vehicle/organ_1.png`)
  },{
    type: 2,
    organIcon: require(`@/assets/image/alarm_vehicle/organ_2.png`)
  },{
    type: 3,
    organIcon: require(`@/assets/image/alarm_vehicle/organ_3.png`)
  },{
    type: 4,
    organIcon: require(`@/assets/image/alarm_vehicle/organ_4.png`)
  },{
    type: 5,
    organIcon: require(`@/assets/image/alarm_vehicle/organ_5.png`)
  },
]

// 生命周期
onMounted( async () => {
  organData.oldList = await globalVue.getSelect('organizationSelect', {});
  organData.list = await globalVue.getSelect('organizationSelect', {});
  detailId.value = _this.$route.query.id || 0;
  disabledBack.value = !!_this.$route.query.disabled || false;
  nextTick(() => {
    init();
  });
});


let init = () => {
	instance.proxy.$http.get('archiveData.getHospitalDetail', {params: {id: detailId.value}}).then(res=>{
    nextTick(() => {
      for(let item in res.data){
        hospitalDetail[item] = res.data[item];
      };
    });
	});
  totalBoxClick(tabsActive.value);
};

// 左边组织数据
const organData = reactive({
  oldList: [],
  list: [],
  search: '',
})

function organClick(item) {
  detailId.value = item.id;
  init();
}

// 表格数据
let tabsActive = ref(0);
let tableData = ref([])
let tableLoading = ref(false)
let pagination = reactive({
  page: 1,
  size: 10,
  total: 0
});


let tabsPage = [
  { name: 'Vehicle', label: 'Vehicle List', value: 0 },
  { name: 'Camera', label: 'Camera List', value: 1 },
  { name: 'Driver', label: 'Driver List', value: 2 },
  { name: 'Alarm', label: 'Alarm List', value: 3 },
];
const componentList = ref([markRaw(MwTableVehicle), markRaw(MwTableCamera), markRaw(MwTableDriver), markRaw(MwTableAlarm)])

let totalBoxClick = (type) => {
  let params = {
    hospitalId: detailId.value,
    ...pagination
  }, url =''
  if(type == 0) url = 'overview.getAmbulanceList';
  if(type == 1) url = 'overview.getCameraList';
  if(type == 2) url = 'overview.getDriverList';
  if(type == 3) {
    url = 'overview.getAlarmList';
    params['startTime'] = moment().subtract(1, 'years').format('YYYY-MM-DD')
    params['endTime'] = moment().format('YYYY-MM-DD')
    params['hospitalIds'] = detailId.value
    delete params.hospitalId
  }
  tableLoading.value = true
  instance.proxy.$http.get(url,{ params }).then(res=>{
    tableLoading.value = false
    let {content, totalElements} = res.data;
    tableData.value = content;
    pagination.total = totalElements;
  }).catch(err => tableLoading.value = false);
};

const tabsClick = (item) => {
  tableData.value = [];
  tabsActive.value = item.value || 0;
  totalBoxClick(item.value);
};

function paginationChange(pagination){
  totalBoxClick(tabsActive.value);
};

function getImg(type){
  !type && (type = 1);
  return imageList.find(i => i.type == type)?.organIcon || ''
}

function organSearch(val){
  organData.list = organData.oldList.filter(i => i.selectName.indexOf(val) > -1);
}

</script>
<template>
  <div class="table_index">
    <el-breadcrumb class="breadcrumb_top" separator="/">
      <!-- <el-breadcrumb-item v-if="disabledBack"><span class="colorCCC">Organization</span></el-breadcrumb-item> -->
      <el-breadcrumb-item :to="{ path: '/organization' }"><span class="colorCCC">Organization</span></el-breadcrumb-item>
      <el-breadcrumb-item><span class="colorFFF">Organization Details</span></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="total_info">
      <!-- <FlvVideo src="http://123.456.7.890:80/live?port=1935&app=myapp&stream=mystream" width="267px" height="140px"></FlvVideo> -->
      <img class="info_image" :src="getImg(hospitalDetail.type)" alt="">
      <div class="info_item">
        <span class="info_item_title">{{hospitalDetail.name}}</span>
        <span>Address：{{hospitalDetail.address}}</span>
        <span>City：{{ hospitalDetail.cityName}}</span>
      </div>
      <div class="info_item">
        <span>Category：{{hospitalDetail.categoryName}}</span>
        <span>Code Number：{{hospitalDetail.code}}</span>
        <span>Scale：{{hospitalDetail.scaleName}}</span>
      </div>
      <div class="info_item">
        <span>Area：{{hospitalDetail.area}}</span>
        <span>Manager：{{hospitalDetail.manager}}</span>
        <span>Telephone：{{hospitalDetail.telephone}}</span>
      </div>
    </div>
    <div class="content_table">
      <div class="tree_address">
        <div class="search_input">
          <el-input v-model="organData.search"
            class="input_Query"
            placeholder="Search"
            @input="organSearch"
            :suffix-icon="Search"/>
        </div>
        <div class="search_tree">
          <div 
            :class="detailId == item.id ? 'search_tree-active search_tree-item' : 'search_tree-item'" 
            v-for="item in organData.list" 
            :key="item.id"
            @click="organClick(item)"
          >{{ item.selectName }}</div>
        </div>
      </div>
      <div class="table_chart">
        <div class="tabs_name">
          <div
            :class="tabsActive == item.value ? 'tabs_item tabs_active' : 'tabs_item'"
            v-for="item in tabsPage"
            :key="item.value"
            @click="tabsClick(item)"
          >{{ item.label }}</div>
        </div>
        <div class="tabs_table tabs_table_detail">
          <component 
            :is="componentList[tabsActive]"
            v-loading="tableLoading"
            :key="tabsActive"
            :data="tableData"
            :showOperate="false"
            :pagination="pagination"
            @paginationChange="paginationChange"
          ></component>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less">
.tabs_table_detail{
  .el-table{
    --el-table-header-bg-color: var(--mw-page-table-cell-row-background-color) !important;
    th.el-table__cell.is-leaf{
      background-color: var(--mw-page-table-cell-row-background-color)
    }
    .el-table__cell{
      background-color: #ffffff
    }
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
    background-color: var(--mw-page-table-cell-row-background-color)
  }
}
</style>
<style scoped lang="less">
.table_index{
  color: var(--mw-font-color-content);
  min-height: calc(100vh - 60px);
  background-color: var(--mw-page-background-color);
  padding: 10px 20px 20px;
  .breadcrumb_top{
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    margin: 5px 0 20px;
    .colorCCC{
      color: var(--mw-not-important-color);
      font-weight: 400 !important;
    }
    .colorFFF{
      color: var(--mw-tabs-menu-active-color);
    }
  }
  .total_info{
    // margin-top: 10px;
    padding: 20px;
    background-color: var(--mw-page-background-bright-color);
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    height: 180px;
    .info_item{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 16px;
      .info_item_title{
        font-size: 18px;
        color: var(--mw-font-color-title);
        font-weight: 600;
      }
    }
    .info_image{
      width: 267px;
      height: 140px;
      margin-right: 80px;
    }
  }
  .content_table {
    width: 100%;
    margin-top: 20px;
    background-color: var(--mw-page-background-bright-color);
    border-radius: 4px;
    min-height: 730px;
    display: flex;
    padding: 20px;
    .table_chart{
      flex: 1;
      overflow: auto;
      .tabs_table{
        height: calc(100% - 60px);
        padding: 15px;
        background-color: var(--mw-page-table-cell-row-background-color);
        margin-left: 10px;
        border-radius: 6px;
      }
      .tabs_name{
        display: flex;
        height: 60px;
        line-height: 26px;
        align-items: center;
        margin-left: 30px;
        .tabs_item{
          width: fit-content;
          margin: 16px;
          // padding: 6px 16px;
          cursor: pointer;
          text-align: center;
          user-select: none;
          font-size: 16px;
          color: var(--mw-not-important-color);
        }
        .tabs_active{
          color: var(--mw-tabs-menu-active-color);
          border-bottom: 2px solid var(--mw-tabs-menu-active-color);
        }
      }
    }
    .tree_address{
      width: 290px;
      .search_tree{
        height: calc(100% - 60px);
        padding: 15px;
        background-color: var(--mw-page-table-cell-row-background-color);
        border-radius: 6px;
        .search_tree-item{
          height: 26px;
          line-height: 26px;
          padding: 0 10px;
          font-size: 14px;
          cursor: pointer;
        }
        .search_tree-active{
          background-color: rgba(58, 140, 252, 0.1);
        }
      }
      .search_input{
        display: flex;
        align-items: center;
        width: 100%;
        height: 60px;
      }
    }
  }
}
</style>